<div class="row">
	<div class="col-sm-12">
		<div class="box">
			<div class="box-header with-border">
				<div id="toolbar">
					<div class="form-inline" role="form">
						<div class="form-group">
							<label for="size" class="control-label">尺寸</label>
							<input type="text" class="form-control" id="size" value="128" placeholder="尺寸">
		                </div>
						<div class="form-group">
							<label for="count" class="control-label">数量</label>
							<input type="text" class="form-control" id="count" value="100" placeholder="数量">
		                </div>
						<div class="form-group">
							<label for="base" class="control-label">前缀</label>
							<input type="text" class="form-control" id="base" value="Moli001" placeholder="前缀">
		                </div>
				    	<div class="form-group btn-group">
							<button type="button" class="btn btn-info" onclick="genCode();"><i class="fa fa-qrcode"></i>&nbsp;生成</button>
							<button type="button" class="btn btn-info" onclick="print();"><i class="fa fa-print"></i>&nbsp;打印</button>
		            	</div>
		            </div>
			    </div>
			</div>
			<!-- /.box-header -->
			<div class="box-body">
				<div id="qrcode-wrapper"></div>
			</div>
			<!-- ./box-body -->
		</div>
		<!-- /.box -->
	</div>
	<!-- /.col -->
</div>

<script type="text/javascript" src="__PUBLIC__/jquery/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="__TMPL__Public/assets/plugins/jqprint/jquery-migrate-1.1.0.js"></script>
<script type="text/javascript" src="__TMPL__Public/assets/plugins/jqprint/jquery.jqprint-0.3.js"></script>
<script>
$(function () {
	//
});

function genCode() {
	var size = $("#size").val();
	var count = $("#count").val();
	var base = $("#base").val();
	var curTime = new Date().getTime();
	
	if (size <= 0 || count <= 0 || base == '') {
		var xalert = xpopup.alert({
			type : 'error',
			title : '参数错误',
			msg : '请输入大于0的尺寸和数量，以及正确的基数！',
			buttons : [{
				id : 'btnOk',
				text : 'OK',
				'class' : '',
				handler : function($this) {
					$this.destroy();
				}
			}]
		});
		
		return false;
	}
	
    var xloading = xpopup.loading();

    $('#qrcode-wrapper').empty();
	for (var i = 0; i < count; i++) {
		$('#qrcode-wrapper').append($('<div class="x-p-10 pull-left qrcode"></div>'));
	}
	$(".qrcode").each(function(index) {
		$(this).qrcode({
			width : size,
			height : size,
			text : base + curTime + index
		});
	});
	$(".qrcode").each(function(index) {
		var img  = $(this).find('canvas')[0].toDataURL("image/png");
		$(this).find('canvas')[0].remove();
		$(this).append('<img src="'+img+'" />');
	});
	
	xloading.destroy();						// loading
}

function print() {
	if ($('#qrcode-wrapper').find('img')[0] == null) {
		var xalert = xpopup.alert({
			type : 'error',
			title : '打印出错',
			msg : '请先生成二维码再打印！',
			buttons : [{
				id : 'btnOk',
				text : 'OK',
				'class' : '',
				handler : function($this) {
					$this.destroy();
				}
			}]
		});
		
		return false;
	}
	
	$("#qrcode-wrapper").jqprint();
}
</script>
